<template>
    <my-dailog v-model:show="showFlag" :showtopclose="true" :styleType="3" @close="close">
        <div class="selectSpecBox">
            <div class="fg"></div>
            <div class="spdg-main">
                <Title>use coupon</Title>
                <ul class="parmasselectList">
                    <li v-for="dt in list" :key="dt" class="selected" @click="setParams(dt)">
                        <label>{{dt.couponAmount?.decimalTwoString}}</label>
                        <span>Spend over {{dt.minAmount?.decimalTwoString}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myDailog from '@/components/myDailog.vue'
import myButton from '@/components/myButton.vue';
import Title from '@/components/title.vue';
import stepper from '@/components/stepper.vue'
export default {
    components:{
       myDailog,
       myButton,
       Title,
       stepper
    },
    props:{
     list:Array
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            showFlag:true,
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo)
        })
        const close =()=>{
            context.emit('close', false)
        }
        const setParams = (item)=>{
            context.emit('change', item)
           // store.commit('shop/set_orderInfo',{params:item})
        }

        return{
            ...toRefs(state),
            close,
            setParams
        }
    }
}
</script>

<style lang="scss" scoped>
    .selectSpecBox{
        display: flex;
        flex-flow: column;
        height: 100%;
        .fg{
            height: 50px;
        }
        .spdg-main{
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
            .parmasselectList{
                list-style: none;
                padding: 0;
                margin: 0;
                li{
                    display: flex;
                    background: rgba(103,248,255,0.2000);
                    height: 70px;
                    line-height: 70px;
                    margin: 20px 0 0 0;
                    padding: 0 20px;
                    font-size: 30px;
                    font-family: Inter-Medium, Inter;
                    font-weight: 500;
                    &.selected{
                        border: 1px solid #67F8FF;
                    }
                    label{
                        color: #A3C9DE;
                    }
                    span{
                        flex: 1;
                        text-align: right;
                    }
                }
            }
        }
    }
</style>